let conDele = document.querySelector('.icon-dele');
let bannerImg = document.querySelector('.banner-center');
let ul = bannerImg.querySelector('ul');
let ol = bannerImg.querySelector('ol');
let bannerLi = document.querySelector('.banner-list').querySelectorAll('li');
let seckill = document.querySelector('.seckill');
let elevator = document.querySelector('.elevator');
let gridBody = document.querySelector('.grid');
let tabNow = document.querySelector('.tabNow');
let slide = document.querySelector('.slide');
let slides = document.querySelector('.slides');
let es = document.querySelector('.recommendShow');
let esshow = document.querySelectorAll('.recommen-show');
let gridMore = document.querySelector('.gridMore-body').querySelectorAll('.gridMore-row');
//头部删除事件
function dele(){
    conDele.parentElement.parentElement.remove();
};
//右侧导航栏点击返回到页面顶部
tabNow.addEventListener('click',function(){
    document.documentElement.scrollTop = 0;
})
// start()
//浏览器刷新之后执行
// function start(){
//     //外面的盒子的宽度
//     let w = bannerImg.offsetWidth;
//     //l利用定时器自动轮播图片
//     let index = 0;
//     let timer = setInterval(function(){
//         index++;
//         //下标乘以盒子的宽度再加5px , 因为轮播图的添加了5px的像素
//         let translateX = -index * (w + 5);
//         // console.log(translateX);
//         //给一个过度效果
//         ul.style.transition = 'all .1s';
//         ul.style.transform = 'translateX('+ translateX+'px)'
//     },2000);
//     // 通过过度完成之后判断监听过度完成事件
//     ul.addEventListener('transitionend',function(){
//         // ul无缝衔接当图片到了第五张 将图片快速切换到第一张图片
//         if(index >= 5){
//             index = 0;
//             //去掉过度效果快速让ul跳到目标位置
//             ul.style.transition = 'none';
//             //利用最新的索引宽度乘以宽度去滚动图片 再重新进行循环
//             let translateX = -index * w;
//             ul.style.transform = 'translateX('+ translateX +'px)'
//             //如果index小于0图片再跳到最后一张
//         }else if(index < 0){
//             index = 5;
//             //去掉过度效果快速让ul跳到目标位置
//             // ul.style.transition = 'none';
//             //利用最新的索引宽度乘以宽度去滚动图片
//             let translateX = -index * w;
//             ul.style.transform = 'translateX('+ translateX +'px)';
//         }
//         //小圆点变化效果
//         //把ol里面的带有current类名的选出来取消类名
//         ol.querySelector('.current').classList.remove('current');
//         //再让当前索引号的li加上current
//         ol.children[index].classList.add('current');

//     });
//     ul.addEventListener('mouseover',function(){
//         clearInterval(timer);
//     });
//     ul.addEventListener('mouseout',function(){
//         start()
//     });
//     //手指滑动轮播图
//     //触摸元素touch获取触摸当前初始坐标
//     let startX = 0;
//     let moveX = 0//后面会使用这个移动距离所以要定义以恶搞全局变量

//     ul.addEventListener('touchstart',function(e){
//         startX = e.targetTouches[0].pageX;
//         //手指停上去的时候清除定时器
//         clearInterval(timer)
//     });
//     //移动手指touchMove;计算手指的滑动距离，并且移动盒子
    
//     ul.addEventListener('touchmove',function(e){
//         //计算移动距离
//         start()
//         moveX = e.targetTouches[0].pageX - startX;
//         //移动盒子：盒子原来的位置+手指移动的距离
//         let translatex  = -index * w + moveX;
//         //手指拖动的时候不需要动画效果所以要取消过度效果
//         ul.style.transition = 'none';
//         ul.style.transform = 'translateX('+ translatex +'px)';
//     });
// }
// bannerImg.addEventListener('mouseover',function(){
//     clearInterval(timer)
// })
let scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
// 右侧边条滚动事件
window.addEventListener('scroll',function(){
    //当滚动条的滚动的高度大于等于文档所离窗口顶部的距离时把右边导航栏设置绝对定位
    if(window.pageYOffset >= seckill.offsetTop){
       elevator.style.position = 'fixed';
       elevator.style.top = 110+'px';
    }else{
        //当滚动条的滚动的高度小于等于文档所离窗口顶部的距离时把右边导航栏设置绝对定位
       elevator.style.position = 'absolute';
       elevator.style.top = 0+'px';
    }
})
let showTab = document.querySelector('.tabPosition');
var flag;
// console.log('推荐区栏高度',gridBody.offsetTop)
window.addEventListener('scroll',function(){
    //当滚动条的滚动的高度大于等于文档所离窗口顶部的距离时把右边导航栏设置绝对定位
    if(window.pageYOffset >= gridBody.offsetTop){
        gridBody.setAttribute('class','gShow');
    }
    if(window.pageYOffset <= flag){
        //当滚动条的滚动的高度小于等于文档所离窗口顶部的距离时把右边导航栏设置相对定位
        gridBody.setAttribute('class','grid')
    }
    if(window.pageYOffset >= seckill.offsetTop){
        showTab.style.display = 'block';
        $('.tabPosition').fadeIn(3000);
    }else{
        showTab.style.display = 'none';
        
    }
})
flag = gridBody.offsetTop;


// banner区左侧导航栏事件
$('.bannerLi').hover(function(){
    $(this).addClass('back')
    $(this).find('.bannerTit').css('display','block');
},function(){
    $(this).removeClass('back')
    $(this).find('.bannerTit').css('display','none');
})
// 头部下拉框事件
$('.shortcutTit').hover(function(){
    $(this).find('.item-list-li').css('display','block');
},function(){
    $(this).find('.item-list-li').css('display','none');
})

let bannerCenter = document.querySelector('.banner-center');
let bannerSlide = document.querySelector('.banner_img');
console.log(bannerSlide)

// let timeStatus= null;//定义一个变量定时器赋值为空，方便后面清除定时器
let index = 0;//用索引号变化图片的
status();
function status(){
    timeStatus =setInterval(function(){
        left();
        // newSlide();
    },3000)
}
function newSlide(){
    console.log(es.style.marginLeft);
    let index = 0;
    let newLeft = -110;
    index++;
    $('.recommen-show:eq('+ index +')').addClass('big').siblings().addClass('bog')
    if(es.style.marginLeft === '-325px'){
        newLeft = -110;
    }else{
        newLeft = parseInt(es.style.marginLeft) - 110;
        console.log($('.recommen-show').index());
        console.log($('.recommen-show:eq('+index+')').index());
    }
    es.style.marginLeft = newLeft + 'px';
}
function left(){
    let leftStat = 0;
    index++;
    if(index>4)index = 0;
    $('ol li:eq('+ index +')').addClass('current').siblings().removeClass('current');
    if(bannerSlide.style.left === '-2200px'){
        leftStat = 0;
    }else{
        leftStat= parseInt(bannerSlide.style.left) - 550;
    }
    bannerSlide.style.left = leftStat+ 'px'
}
function right(){
    let leftStat = 0;
    index--;
    if(index<0)index = 4;
    $('ol li:eq('+ index +')').addClass('current').siblings().removeClass('current');
    if(bannerSlide.style.left === '0px'){
        leftStat = -2200;
    }else{
        leftStat= parseInt(bannerSlide.style.left) + 550;
    }
    bannerSlide.style.left = leftStat+ 'px';
}
$('.slide').click(function(){
    left();
});
$('.slides').click(function(){
    right();
});
$('.banner-center li').click(function(){
    console.log($(this).index());
    $(this).addClass('current').siblings().removeClass('current');
    bannerSlide.style.left = parseInt (-index * 550)+'px';
    console.log(bannerSlide.style.left)
})
//鼠标hover清除定时器
$('.banner-center').hover(function(){
    clearInterval(timeStatus);
},function(){
    status();
})






